<template>
  <div class="demo">
    <div class="demo-title">日期时间选择</div>
    <div class="demo-content">
      <Space direction="vertical" :size="12">
        <DatePicker show-time placeholder="Select Time" @change="onChange" @ok="onOk" />
        <DatePicker.RangePicker
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD HH:mm"
          :placeholder="['Start Time', 'End Time']"
          @change="onRangeChange"
          @ok="onRangeOk"
        />
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Dayjs } from 'dayjs';
  import Space from '@sscd/space';
  import DatePicker from '@sscd/date-picker';
  const onChange = (value: Dayjs | string, dateString: string) => {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
  };
  const onOk = (value: Dayjs | string) => {
    console.log('onOk: ', value);
  };
  const onRangeChange = (value: [Dayjs, Dayjs] | [string, string], dateString: [string, string]) => {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
  };
  const onRangeOk = (value: [Dayjs, Dayjs] | [string, string]) => {
    console.log('onOk: ', value);
  };
</script>
